<template>
	<div class="device-info">
		<!-- 设备详情 -->
		<view class="header">
			<text class="title">设备详情</text>
		</view>

		<!-- 设备状态信息 -->
		<view class="status-area">
			<text class="device-id">{{ device.code }}</text>
			<text
				:class="['status', device.status === 'on' ? 'running' : 'stopped']">{{ device.status=== 'on' ? '运行中' : '已关机' }}</text>
		</view>

		<!-- 设备图片 -->
		<view class="device-image">
			<image :class="device.status === 'on' ? 'online' : 'offline'" src="/static/ATM_pic.png" mode="aspectFill" />
		</view>

		<!-- 详细信息 -->
		<view class="details">
			<view class="detail-item">
				<text class="label">机器编号</text>
				<text class="value">{{ device.code }}</text>
			</view>
			<view class="detail-item">
				<text class="label">所属片区</text>
				<text class="value">{{ device.area }}</text>
			</view>
			<view class="detail-item">
				<text class="label">主要负责人</text>
				<text class="value">{{ device.mainManager }}</text>
			</view>
			<view class="detail-item">
				<text class="label">联系电话</text>
				<text class="value">{{ device.tel }}</text>
			</view>
			<view class="detail-item">
				<text class="label">上次送检</text>
				<text class="value">{{ device.lastCheck }}</text>
			</view>
			<view class="detail-item">
				<text class="label">库存金额</text>
				<text class="value">￥{{ device.stock }}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="actions">
			<button class="btn repair-btn" @click="openRepairDialog">📮 报修</button>
		</view>
		<view class="contact-admin">
			<text class="label">联系管理员：</text>
			<button class="phone-btn">
				{{ device.tel }}
			</button>
		</view>

		<!-- 使用 uni-popup 替代自定义弹窗 -->
		<uni-popup ref="repairPopup" type="bottom" background-color="transparent">
			<view class="dialog-overlay" @click.self="closeDialog" @touchmove.stop.prevent>
				<view class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialogTitle">
					<header class="dialog-header">
						<text id="dialogTitle">报修设备：{{ device.code }}</text>
						<button @click="closeDialog" class="close-btn" aria-label="关闭报修弹窗">✕</button>
					</header>

					<form @submit.prevent="submitRepair" class="dialog-body">
						<div class="form-group">
							<label>申请时间</label>
							<picker mode="date" disabled>
								<view class="input-field">{{ repairInfo.applyTime }}</view>
							</picker>
						</div>

						<div class="form-group">
							<label>您的姓名<span class="required">*</span></label>
							<input type="text" v-model.trim="repairInfo.name" required class="input-field" />
						</div>

						<div class="form-group">
							<label>您的工号<span class="required">*</span></label>
							<input type="text" v-model.trim="repairInfo.workNumber" required class="input-field" />
						</div>

						<!-- <div class="form-group">
							<label>身份类型<span class="required">*</span></label>
							<picker :range="identityTypes" @change="onIdTypeChange">
								<view class="input-field">{{ repairInfo.idType || '请选择身份类型' }}</view>
							</picker>
						</div> -->

						<div class="form-group">
							<label>联系电话<span class="required">*</span></label>
							<input type="tel" v-model.trim="repairInfo.phone" required class="input-field" />
						</div>

						<div class="form-group">
							<label>故障类型<span class="required">*</span></label>
							<picker mode="multiSelector" :range="[faultOptions]" @change="onFaultChange">
								<view class="input-field">
									{{ repairInfo.faultTypes.length ? repairInfo.faultTypes.join('，') : '请选择故障类型' }}
								</view>
							</picker>
						</div>

						<div class="form-group">
							<label>附言</label>
							<input type="text" v-model.trim="repairInfo.comments" class="input-field" />
						</div>

						<footer class="dialog-footer">
							<button type="button" @click="closeDialog" class="cancel-btn">取消</button>
							<button type="button" @click="submitRepair" class="submit-btn">申请报修</button>
						</footer>
					</form>
				</view>
			</view>
		</uni-popup>
		<view v-if="repairSuccessTip" class="repair-success-banner" @click="repairSuccessTip = false">
			<text>📮 报修申请成功</text>
		</view>

	</div>
</template>

<script>
	import formatDateTime from '@/utils/formatDateTime';
	import {
		getManagersByAreaId
	} from '@/api/user';
	import {
		getAtmById
	} from '@/api/atm';
	import {
		getAreaById
	} from '@/api/area';

	export default {
		data() {
			return {
				device: {
					id: null,
					code: '',
					status: '',
					image: '',
					area: '',
					mainManager: '',
					tel: '',
					lastCheck: '',
					stock: null
				},
				repairInfo: {
					applyTime: '',
					name: '',
					workNumber: '',
					idType: '',
					phone: '',
					faultTypes: [],
					comments: ''
				},
				managerList: [],
				maxDate: '',
				identityTypes: ['管理员', '普通员工'],
				faultOptions: ['屏幕损坏', '无法识别银行卡', '按钮失灵', '系统异常'],
				repairSuccessTip: false,
			};
		},

		onLoad: async function(option) {
			await this.fetchData(option.id);
		},

		mounted() {},
		methods: {
			async fetchData(id) {
				const result = await getAtmById(id);
				console.log(result);
				if (result) {
					const area = await getAreaById(result.areaId);
					const now = formatDateTime(new Date());
					const managers = await getManagersByAreaId(result.areaId);
					console.log(managers);
					const mainManager = managers.data ? managers.data[0] : {
						name: '暂无',
						tel: ''
					};
					this.device = {
						id: result.id,
						code: result.atmCode,
						status: result.status,
						stock: result.money,
						area: `澳门 ${area.district} ${area.name}`,
						mainManager: mainManager.name,
						tel: mainManager.tel,
						lastCheck: now,
						image: '/static/ATM_pic.png',
					}
					this.managerList = managers.data ? managers.data.map(m => ({
						id: m.id,
						name: m.name,
						account: m.account,
						tel: m.tel
					})) : [];
					console.log(this.managerList);
				}
			},

			//拨打管理员电话
			//makeCall() {
			//  uni.makePhoneCall({
			//   phoneNumber: this.device.phone
			//});
			//},
			openRepairDialog() {
				const now = formatDateTime(new Date());
				this.repairInfo = {
					applyTime: now,
					name: '',
					workNumber: '',
					idType: '',
					phone: '',
					faultTypes: [],
					comments: ''
				};
				this.$refs.repairPopup.open();
			},
			closeDialog() {
				this.$refs.repairPopup.close();
			},
			onDateChange(e) {
				this.repairInfo.applyTime = e.detail.value;
			},
			onIdTypeChange(e) {
				this.repairInfo.idType = this.identityTypes[e.detail.value];
			},
			onFaultChange(e) {
				const indices = e.detail.value;
				this.repairInfo.faultTypes = indices.map(i => this.faultOptions[i]);
			},
			submitRepair() {
				const info = this.repairInfo;

				// ✅ 表单校验
				if (!info.applyTime) {
					uni.showToast({
						title: '请选择申请时间',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				if (!info.name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				if (!info.workNumber.trim()) {
					uni.showToast({
						title: '请输入工号',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				if (!info.idType.trim()) {
					uni.showToast({
						title: '请选择身份类型',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				if (!info.phone.trim()) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(info.phone)) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				if (info.faultTypes.length === 0) {
					uni.showToast({
						title: '请选择故障类型',
						icon: 'none',
						duration: 2500
					});
					return;
				}

				// ✅ 提交成功流程
				// 提交成功后
				console.log("✅ 提交成功");
				this.closeDialog();

				this.$nextTick(() => {
					this.repairSuccessTip = true; // 立即显示
					setTimeout(() => {
						this.repairSuccessTip = false; // 5秒后隐藏
					}, 5000);
				});

				console.log('报修信息提交:', info);
			},

			contactManager() {
				alert('联系管理员：' + this.device.phone);
			}
		}
	};
</script>




<style scoped>
	.device-info {
		padding: 20px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		background-color: #fafafa;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.header {
		text-align: center;
		margin-bottom: 15px;
	}

	.title {
		font-size: 28px;
		font-weight: 700;
		color: #BD3124;
		letter-spacing: 1px;
	}

	.status-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding: 0 10px;
	}

	.device-id {
		font-size: 24px;
		font-weight: 600;
		color: #333;
		font-family: 'Times New Roman', Times, serif;
	}

	.status {
		padding: 6px 15px;
		border-radius: 20px;
		font-size: 14px;
		color: #fff;
		font-weight: 600;
		user-select: none;
	}

	.running {
		background-color: #28a745;
	}

	.stopped {
		background-color: #BD3124;
	}

	.device-image {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.device-image img,
	.device-image image {
		width: 140px;
		height: 140px;
		border-radius: 12px;
		object-fit: cover;
	}

	.online {
		box-shadow: 0 4px 8px rgb(0 170 0 / 0.3);
	}

	.offline {
		box-shadow: 0 4px 8px rgb(189 49 36 / 0.3);
	}

	.details {
		background: #fff;
		border-radius: 12px;
		padding: 15px 20px;
		box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
		margin-bottom: 25px;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid #eee;
		font-size: 15px;
	}

	.detail-item:last-child {
		border-bottom: none;
	}

	.label {
		display: block;
		color: #777;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.value {
		color: #222;
		max-width: 65%;
		text-align: right;
		font-weight: 600;
		word-break: break-word;
	}

	.actions {
		display: flex;
		justify-content: space-around;
		margin-bottom: 8px;
	}

	button,
	.btn {
		padding: 12px 28px;
		border: none;
		border-radius: 25px;
		cursor: pointer;
		font-size: 16px;
		font-weight: 700;
		transition: background-color 0.3s ease, box-shadow 0.3s ease;
		user-select: none;
	}

	.repair-btn {
		background-color: #BD3124;
		color: #fff;
	}

	.repair-btn:hover {
		background-color: #a42820;
		box-shadow: 0 6px 16px rgb(164 40 32 / 0.5);
	}

	.manage-btn {
		background-image: linear-gradient(90deg, #BD3124, #f56c6c);
		color: #fff;
		box-shadow: 0 4px 12px rgb(245 108 108 / 0.7);
	}

	.manage-btn:hover {
		background-image: linear-gradient(90deg, #a42820, #d95454);
		box-shadow: 0 6px 16px rgb(217 84 84 / 0.8);
	}

	/* 弹窗样式 */
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.35);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		backdrop-filter: blur(4px);
	}

	.dialog {
		background-color: #fff;
		width: 100%;
		max-width: 360px;
		border-radius: 16px;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		animation: fadeInScale 0.5s ease forwards;
	}

	@keyframes fadeInScale {
		0% {
			opacity: 0;
			transform: scale(0.95);
			transform: rotate(0deg);
		}

		50% {
			opacity: 0;
			transform: scale(2);
			transform: rotate(360deg);
		}

		100% {
			opacity: 1;
			transform: scale(1);
			transform: rotate(0deg);
		}
	}

	.dialog-header {
		padding: 18px 22px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 700;
		font-size: 20px;
		color: #BD3124;
		border-bottom: 1px solid #eee;
	}

	.close-btn {
		margin: 0 0;
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
		color: #999;
		transition: color 0.3s;
		line-height: 1;
		padding: 0;
	}

	.close-btn::after {
		display: none;
	}

	.close-btn:hover {
		color: #BD3124;
	}

	.dialog-body {
		padding: 20px 25px;
		max-height: 70vh;
		overflow-y: auto;
		font-size: 15px;
		color: #333;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		margin-bottom: 18px;
	}

	.form-group label,
	fieldset legend {
		font-weight: 600;
		margin-bottom: 8px;
		color: #555;
		user-select: none;
	}

	.required {
		color: #BD3124;
		margin-left: 3px;
	}

	.input-field {
		padding: 10px 14px;
		border-radius: 8px;
		border: 1.8px solid #ccc;
		font-size: 15px;
		transition: border-color 0.3s;
	}

	.input-field:focus {
		outline: none;
		border-color: #BD3124;
		box-shadow: 0 0 8px rgba(189, 49, 36, 0.3);
	}

	.fault-types {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.fault-types label {
		font-size: 14px;
		cursor: pointer;
		user-select: none;
		padding-left: 6px;
		position: relative;
	}

	.fault-types input[type="checkbox"] {
		width: 18px;
		height: 18px;
		margin-right: 6px;
		vertical-align: middle;
		cursor: pointer;
		accent-color: #BD3124;
	}

	.dialog-footer {
		display: flex;
		justify-content: space-between;
		padding: 20px 25px;
	}

	.cancel-btn,
	.submit-btn {
		flex: 1;
		margin: 0 5px;
		padding: 12px 0;
		border-radius: 25px;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
		border: none;
		user-select: none;
		transition: background-color 0.3s ease;
	}

	.cancel-btn {
		background-color: #999;
		color: #fff;
	}

	.cancel-btn:hover {
		background-color: #666;
	}

	.submit-btn {
		background-color: #BD3124;
		color: #fff;
		box-shadow: 0 4px 12px rgba(189, 49, 36, 0.6);
	}

	.submit-btn:hover {
		background-color: #a42820;
		box-shadow: 0 6px 16px rgba(164, 40, 32, 0.8);
	}

	/* 滚动条优化 */
	.dialog-body::-webkit-scrollbar {
		width: 8px;
	}

	.dialog-body::-webkit-scrollbar-thumb {
		background-color: rgba(189, 49, 36, 0.3);
		border-radius: 4px;
	}

	.repair-success-banner {
		position: fixed;
		top: 120rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #e6f7e6;
		color: #389e0d;
		padding: 20rpx 40rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		z-index: 9999;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}


	/* 淡入淡出动画 */
	@keyframes fadeInOut {
		0% {
			opacity: 0;
			transform: translate(-50%, -10px);
		}

		10%,
		90% {
			opacity: 1;
			transform: translate(-50%, 0);
		}

		100% {
			opacity: 0;
			transform: translate(-50%, -10px);
		}
	}
</style>